import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Select, Button, Table, Input, Image } from "antd";
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  SearchOutlined,
} from "@ant-design/icons";
import { text_check, post_axios, show_img_url } from "../../utils";

export default function VisionpayGoodsOfficial(props) {
  const { t } = useTranslation();
  const [tableHeight, setTableHeight] = useState(0);
  const { actions, setSpinning } = props;
  let { menu_action, user_power_lang, username, user_grade } = actions;
  user_power_lang = JSON.parse(user_power_lang);

  // 国内国外判断
  const session_company = sessionStorage.getItem("company");
  let localStorage_company = JSON.parse(localStorage.getItem("choose_company"));
  const local_company_object =
    localStorage_company &&
    localStorage_company[username] &&
    localStorage_company[username]
      ? localStorage_company[username]
      : "";

  const [goods_list, setGoods_list] = useState([]);
  const [name_search, setName_search] = useState("");
  const [barcode_search, setBarcode_search] = useState("");
  const [avm, setAvm] = useState("");
  const [sell_goods_type, setSell_goods_type] = useState("");
  const [page, setPage] = useState(1);
  const [rows, setRows] = useState(20);
  const [total, setTotal] = useState(0);

  const getData = async (newPage, newRows) => {
    let upMsg = {
      page: newPage ? newPage : page,
      rows: newRows ? newRows : rows,
      company_id: local_company_object.id,
      company: local_company_object.company,
      barcode: barcode_search,
      goods_name: name_search,
      avm: avm,
      sell_goods_type: sell_goods_type,
    };
    setSpinning(true);
    let res = await post_axios("visionpay_goods_official", "m_query", upMsg);
    setSpinning(false);
    if (!res) return;
    const newArr = res.data_rows.rows.map((item) => {
      item["pic"] = show_img_url(item, local_company_object.company);
      return item;
    });
    setGoods_list(newArr);
    setTotal(res.data_rows.total);
  };
  const columns = [
    {
      dataIndex: "idx",
      align: "center",
      width: 40,
      render: (_, record, index) => <>{index + 1}</>,
    },
    {
      title: t("goods.goods_name"),
      dataIndex: "goods_name",
      align: "center",
    },
    {
      title: t("goods.goods_image"),
      align: "center",
      render: (_, record) => (
        <>
          {record.pic ? <Image src={record.pic} className="table_img" /> : ""}
        </>
      ),
    },
    {
      title: t("goods.goods_barcode"),
      align: "center",
      render: (_, record) => <>{record.bar_code[0]}</>,
    },

    {
      title: "类型",
      align: "center",
      render: (_, record) => (
        <>
          <span>{record.static_state ? "静态" : ""}</span>
          <span>{record.static_state && record.dynamic_state ? "/" : ""}</span>
          <span>{record.dynamic_state ? "动态" : ""}</span>
        </>
      ),
    },
  ];
  // 分页器
  const pageOnChange = async (page, pageSize) => {
    setPage(page);
    setRows(pageSize);
    getData(page, pageSize);
  };

  const search_data = () => {
    setPage(1);
    getData(1);
  };
  useEffect(() => {
    // 挂载后或者更新后的操作
    getData().then(() => {
      const tabBoxHeight = document.getElementsByClassName(
        "visionpay_goods_official"
      )[0].scrollHeight;
      const tableHeight = tabBoxHeight - 96 - 70;
      setTableHeight(tableHeight);
    });
  }, []);
  return (
    <div className="visionpay_goods_official modules">
      <div className="screen_ipt">
        <div className="ipt_box normal_title">
          <div className="ipt_box_title">{t("goods.goods_name")}</div>
          <Input
            placeholder=" "
            value={name_search}
            size="small"
            onChange={(e) => setName_search(e.target.value)}
          />
        </div>

        <div className="ipt_box normal_title">
          <div className="ipt_box_title">{t("goods.goods_barcode")}</div>
          <Input
            placeholder=" "
            value={barcode_search}
            size="small"
            onChange={(e) => setBarcode_search(e.target.value)}
          />
        </div>

        <div className="ipt_box normal_title">
          <div className="ipt_box_title">{t("platform_manager.avm")}</div>
          <Input
            placeholder=" "
            value={avm}
            size="small"
            onChange={(e) => setAvm(e.target.value)}
          />
        </div>
        <div className="ipt_box normal_title">
          <div className="ipt_box_title">类型</div>
          <Select
            size="small"
            placeholder=" "
            options={[
              {
                label: "静态",
                value: "STATIC_STATE",
              },
              {
                label: "动态",
                value: "DYNAMIC_STATE",
              },
            ]}
            value={sell_goods_type}
            onChange={(value) => setSell_goods_type(value)}
          />
        </div>
      </div>
      <div className="screen_btn">
        <div className="btn_box">
          {/* 查询 */}
          {menu_action.indexOf("m_query") > -1 ? (
            <Button
              size="small"
              type="text"
              icon={<SearchOutlined style={{ color: "#1677FF" }} />}
              onClick={search_data}
            >
              {text_check(user_power_lang["m_query"])}
            </Button>
          ) : (
            ""
          )}
        </div>
      </div>
      <div className="table_box">
        <div className="page-table">
          <Table
            dataSource={goods_list}
            size="small"
            bordered
            columns={columns}
            rowKey="barcode"
            virtual
            scroll={{
              y: tableHeight,
            }}
            pagination={{
              defaultCurrent: page,
              defaultPageSize: rows,
              size: "small",
              current: page,
              total: total,
              responsive: true,
              showTotal: (total) =>
                text_check({
                  msg_cn: `共 ${total} 条`,
                  msg_en: `Total ${total} items`,
                }),
              onChange: pageOnChange,
            }}
          />
        </div>
      </div>
    </div>
  );
}
